<template>
  <div class="about-page">
    <!-- 头部横幅 -->
    <div class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-16">
      <div class="container-custom">
        <h1 class="text-4xl font-bold mb-4">关于我们</h1>
        <p class="text-xl opacity-90">专业的源代码交易与技术文档学习平台</p>
      </div>
    </div>

    <div class="container-custom py-12">
      <!-- 公司简介 -->
      <section class="mb-16">
        <div class="card">
          <h2 class="text-3xl font-bold text-gray-900 mb-6">公司简介</h2>
          <div class="prose max-w-none">
            <p class="text-gray-600 text-lg leading-relaxed mb-4">
              代码小库成立于2024年，是一家专注于源代码交易和技术文档分享的互联网平台。我们致力于为广大开发者提供高质量的源代码资源，帮助开发者提升技能、加速项目开发。
            </p>
            <p class="text-gray-600 text-lg leading-relaxed mb-4">
              我们的团队由经验丰富的开发者、设计师和产品经理组成，深知开发者在项目开发过程中的痛点和需求。通过精心筛选和审核，我们确保平台上的每一个源码都具有高质量、可读性强、文档完善的特点。
            </p>
            <p class="text-gray-600 text-lg leading-relaxed">
              截至目前，我们已经为超过10万名开发者提供服务，累计交易源码超过50万次，获得了用户的广泛好评和信任。
            </p>
          </div>
        </div>
      </section>

      <!-- 我们的使命 -->
      <section class="mb-16">
        <div class="text-center mb-12">
          <h2 class="text-3xl font-bold text-gray-900 mb-4">我们的使命</h2>
          <p class="text-gray-600 text-lg max-w-3xl mx-auto">
            让每一位开发者都能找到优质的代码资源，让技术分享变得更简单
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div class="card text-center">
            <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <div class="i-mdi-quality-high text-3xl text-blue-600" />
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">高质量</h3>
            <p class="text-gray-600">
              严格的审核机制，确保每一份源码都经过专业团队验证，代码质量有保障
            </p>
          </div>

          <div class="card text-center">
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <div class="i-mdi-security text-3xl text-green-600" />
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">安全可靠</h3>
            <p class="text-gray-600">
              完善的交易保障体系，保护买卖双方的合法权益，让交易更放心
            </p>
          </div>

          <div class="card text-center">
            <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <div class="i-mdi-account-group text-3xl text-purple-600" />
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">社区驱动</h3>
            <p class="text-gray-600">
              活跃的开发者社区，技术交流与知识分享，共同推动技术进步
            </p>
          </div>
        </div>
      </section>

      <!-- 核心价值观 -->
      <section class="mb-16">
        <div class="card bg-gradient-to-br from-blue-50 to-purple-50">
          <h2 class="text-3xl font-bold text-gray-900 mb-8 text-center">核心价值观</h2>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="flex items-start space-x-4">
              <div class="w-12 h-12 bg-white rounded-lg shadow-sm flex items-center justify-center flex-shrink-0">
                <div class="i-mdi-star text-2xl text-yellow-500" />
              </div>
              <div>
                <h3 class="font-bold text-gray-900 mb-2">用户至上</h3>
                <p class="text-gray-600">始终将用户需求放在第一位，持续优化产品和服务</p>
              </div>
            </div>

            <div class="flex items-start space-x-4">
              <div class="w-12 h-12 bg-white rounded-lg shadow-sm flex items-center justify-center flex-shrink-0">
                <div class="i-mdi-lightbulb-on text-2xl text-orange-500" />
              </div>
              <div>
                <h3 class="font-bold text-gray-900 mb-2">持续创新</h3>
                <p class="text-gray-600">紧跟技术发展趋势，不断创新产品功能和服务模式</p>
              </div>
            </div>

            <div class="flex items-start space-x-4">
              <div class="w-12 h-12 bg-white rounded-lg shadow-sm flex items-center justify-center flex-shrink-0">
                <div class="i-mdi-handshake text-2xl text-green-500" />
              </div>
              <div>
                <h3 class="font-bold text-gray-900 mb-2">诚信经营</h3>
                <p class="text-gray-600">坚持诚信为本，建立公平透明的交易环境</p>
              </div>
            </div>

            <div class="flex items-start space-x-4">
              <div class="w-12 h-12 bg-white rounded-lg shadow-sm flex items-center justify-center flex-shrink-0">
                <div class="i-mdi-heart text-2xl text-red-500" />
              </div>
              <div>
                <h3 class="font-bold text-gray-900 mb-2">开放共享</h3>
                <p class="text-gray-600">推崇开源精神，促进技术知识的自由流动与分享</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 发展历程 -->
      <section class="mb-16">
        <h2 class="text-3xl font-bold text-gray-900 mb-8 text-center">发展历程</h2>
        
        <div class="space-y-8">
          <div class="flex items-start space-x-6">
            <div class="flex-shrink-0 w-24 text-right">
              <span class="text-2xl font-bold text-blue-600">2024.01</span>
            </div>
            <div class="flex-1 card">
              <h3 class="font-bold text-gray-900 mb-2">平台正式上线</h3>
              <p class="text-gray-600">代码小库1.0版本正式上线，提供基础的源码交易功能</p>
            </div>
          </div>

          <div class="flex items-start space-x-6">
            <div class="flex-shrink-0 w-24 text-right">
              <span class="text-2xl font-bold text-blue-600">2024.03</span>
            </div>
            <div class="flex-1 card">
              <h3 class="font-bold text-gray-900 mb-2">用户数突破1万</h3>
              <p class="text-gray-600">注册用户突破10000人，日均交易量达到100+</p>
            </div>
          </div>

          <div class="flex items-start space-x-6">
            <div class="flex-shrink-0 w-24 text-right">
              <span class="text-2xl font-bold text-blue-600">2024.06</span>
            </div>
            <div class="flex-1 card">
              <h3 class="font-bold text-gray-900 mb-2">推出会员服务</h3>
              <p class="text-gray-600">上线VIP和SVIP会员体系，为用户提供更多增值服务</p>
            </div>
          </div>

          <div class="flex items-start space-x-6">
            <div class="flex-shrink-0 w-24 text-right">
              <span class="text-2xl font-bold text-blue-600">2024.09</span>
            </div>
            <div class="flex-1 card">
              <h3 class="font-bold text-gray-900 mb-2">在线文档系统上线</h3>
              <p class="text-gray-600">推出在线技术文档学习平台，丰富产品生态</p>
            </div>
          </div>

          <div class="flex items-start space-x-6">
            <div class="flex-shrink-0 w-24 text-right">
              <span class="text-2xl font-bold text-blue-600">2025.01</span>
            </div>
            <div class="flex-1 card border-2 border-blue-500">
              <h3 class="font-bold text-gray-900 mb-2">用户数突破10万</h3>
              <p class="text-gray-600">累计服务开发者超过10万人，成为行业领先平台</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 联系方式 -->
      <section>
        <div class="card bg-gradient-to-r from-blue-600 to-purple-600 text-white text-center">
          <h2 class="text-3xl font-bold mb-4">加入我们</h2>
          <p class="text-lg mb-6 opacity-90">
            如果您对我们的服务感兴趣，或想加入我们的团队，欢迎与我们联系
          </p>
          <NuxtLink to="/contact" class="btn bg-white text-blue-600 hover:bg-gray-100">
            联系我们
          </NuxtLink>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
useSeoMeta({
  title: '关于我们 - 代码小库',
  description: '代码小库是专业的源代码交易与技术文档学习平台，为开发者提供高质量的源码资源，帮助开发者提升技能、加速项目开发',
  ogTitle: '关于我们 - 代码小库',
  ogDescription: '专业的源代码交易与技术文档学习平台',
})
</script>

